<template>
  <div v-if="!sendShow" class="mainTable">

    <div class="right-list">
      <div class="list-top">
        <span>公告通知</span>
        <el-button type="primary" @click="toSend" v-if="store==1">发公告</el-button>
      </div>
      <el-table :data="noticeList" style="width: 100%;margin: 20px 0;" v-loading="loading" border :header-cell-style="{ 'padding':'20px 0','background': 'rgba(24, 132, 252, 0.1)', 'color': 'black' }"
      :row-class-name="tableRowClassName"> 
      <el-table-column label="公告名称" width="auto">
        <template #default="scope">
          <div class="msg"><img src="../../assets/喇叭.png" alt=""> <span>{{ scope.row.name }}</span></div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="220" />
      <el-table-column  label="操作" width="180">
      <template #default="scope">
        <el-button link type="primary" size="small"  @click="check(scope.row,1)">查看</el-button>
        <el-button link type="primary" size="small"  @click="check(scope.row,2)" v-if="store==1">编辑</el-button>
        <el-button link type="primary" size="small" style="color:red" @click="deleteMsg(scope.row)" v-if="store==1">删除</el-button>
      </template>
      </el-table-column>
      </el-table>
    </div>
  </div>
  <sendMsg :msgList="noticeOne" :type="clickType" v-else />
</template>
<script lang="ts" setup>
import sendMsg from './sendNotice.vue'
import { ref, onMounted } from 'vue'
import {ElMessage,ElMessageBox} from "element-plus"
import {getAllNotice,delNotice} from '../../util/api'
import { useStore } from '@/store' 
const store = useStore().state.userInfo.userRole
// console.log(store)
//是否显示发送公告界面
const sendShow = ref(false)
//单个公告
const noticeOne:any =ref()
const loading:any =ref(false)
//点击类型
const clickType:any = ref(0)
//公告列表
const noticeList: any = ref([])

//获取信息
const getAllNotices = async()=>{
  noticeList.value=[]
  loading.value=true
  const res:any = await getAllNotice()
  loading.value=false
  // console.log(res)
  if(res.code!=200) return ElMessage.error('发生错误')
  noticeList.value=res.data
  
}
//发送消息按钮
const toSend = () => {
  //清除编辑或者查看后的传递参数
  noticeOne.value = '' 
  clickType.value = 0
  //展示子组件
  sendShow.value = true
  //保存子组件刷新后存在
  window.sessionStorage.setItem('isShowmsg','1')
}
//修改报表颜色
const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (rowIndex%2==0) {
    return ''
  }else{
    return 'warning-row'
  }
}
//查看消息//编辑
const check = (item:any,type:any)=>{
  noticeOne.value = item.id
  sendShow.value = true 
  clickType.value = type
}
//删除
const deleteMsg= (item:any)=>{
  ElMessageBox.confirm(
        '确定删除?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async() => {
        const res:any = await delNotice(item.id)
        if(res.code==200) ElMessage.success('删除成功')
        getAllNotices()
      }) 
}
onMounted(() => {
  const isShow = window.sessionStorage.getItem('isShowmsg')||''
  // console.log(isShow)
  if(isShow=='1'){
    sendShow.value = true 
  }else{
    getAllNotices()
  }
})
</script>
<style lang="scss" scoped>
.mainTable {
  width: 100%;
  display: flex;
}

.left-list {
  width: 15%;
  min-width: 230px;
}

.right-list {
  flex: 1;
  background-color: white;
  min-height: calc(100vh - 80px);
  box-sizing: border-box;
  padding: 30px;

  .list-top {
    display: flex;
    justify-content: space-between;
    width: 100%;

    span {
      font-size: 22px;
      color: #3B3B3B;
    }
  }

  .list-box {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 0;

    .list-item {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background-color: #F5F5F5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 15px;
      border-radius: 5px;
      .time{
        color: #AFAFAF;
        font-size: 20px;
      }
    }
    .list-item:nth-child(2n) {
      background-color: white;
    }
  }
  .list-bottom{
       display: flex;
       justify-content: right;
       box-sizing: border-box;
       padding-right: 20px;
       margin-top: 30px;
    }
}

.title-t {
  width: 100%;
  color: #EB4C40;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 550;
  padding: 14px;
  box-sizing: border-box;
}

::v-deep(.el-collapse-item__arrow) {
  display: none !important;
}

/* 修改下拉背景 */
::v-deep(.el-collapse-item__content) {
  padding-bottom: 0;
  background-color: #F5F5F5;
  padding: 10px;
  box-sizing: border-box;
}

.listItem {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 未点击样式 */
.noActive {
  color: #858585;
}

/* 点击样式 */
.active {
  color: #EB4C40;
  background-color: rgba(235, 76, 64, .1);
}
.msg {
        line-height: 60px;
        display: flex;
        align-items: center;
        font-size: 20px;
        img {
          display: inline-block;
          width: 20px;
          box-sizing: border-box;
          margin-right: 10px;
        }
      }
::v-deep(.el-table .warning-row) {
  --el-table-tr-bg-color: #F5F5F5!important;
}
</style>